/*
 * @Author: xiaosihan 
 * @Date: 2024-10-30 10:41:31 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-30 19:47:39
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./rightTop.module.less";
import { Table } from "antd";
import Title1 from "@components/Title1/Title1";
import Title2 from "@components/Title2/Title2";
import InstitutionalRiskIndex from "./InstitutionalRiskIndex/InstitutionalRiskIndex";
import Table2 from "./Table2/InstitutionalRiskIndex";
import Table3 from "./Table3/InstitutionalRiskIndex";
import Table4 from "./Table4/InstitutionalRiskIndex";
import Table5 from "./Table5/InstitutionalRiskIndex";
import modelIntroductionStore from "../modelIntroductionStore";

interface Iprops {
    children?: ReactNode
}

// 右上表格
export default function RightTop(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});

    const [active, setActive] = useState(modelIntroductionStore.modelTypeActive);

    useEffect(() => autorun(() => {
        setActive(modelIntroductionStore.modelTypeActive);
    }, { delay: 10 }), []);
    return (
        <div ref={dom} className={styles.rightTop} >

            <Title2 left={0} top={0} >长期护理保险反欺诈大数据模型</Title2>

            {/* 机构风险指数 */}
            {active === 0 && <InstitutionalRiskIndex />}
            {active === 1 && <Table2 />}
            {active === 2 && <Table3 />}
            {active === 3 && <Table4 />}
            {active === 4 && <Table5 />}
    
        </div>
    );

}